import AlertFill from "@/assets/image/icons/alert-fill.svg";
import { Alert, Button, Card } from "antd";
import { useEffect } from "react";
import { history } from "umi";
import "./index.less";
import { PaddingContent } from "@/components/page-padding";

const Declined = () => {
  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
    event.preventDefault();
    console.log("Link clicked!");
    // 在这里添加你的实际点击处理逻辑
    // history.push('/myprofile/info')
    console.log("history", history);
  };

  useEffect(() => {
    if (!(window as any).clickHandlerObj) {
      (window as any).clickHandlerObj = {
        handleClick: handleClick,
      };
    }
  }, []);

  const htmlContent = `Please update your account's identity verification. An incorrect document has been uploaded.<br/>Click <a href="#" onClick="window.clickHandlerObj.handleClick(event)">here</a> to complete the verification process.`;
  return (
    <PaddingContent>
      <div className="declined">
        <div className="title">My Profile</div>
        <div className="declined-content">
          <div className="left-content">
            <div className="circle">
              <span className="circle-text">s</span>
            </div>
            <div className="text-content">
              <span> Hello,</span>
              <span className="user-name">Sophie</span>
            </div>
            <Button
              onClick={() => history.push("/myprofile/info")}
              type="default"
              size={"middle"}
            >
              My Profile
            </Button>
          </div>
          <div className="right-content">
            <Alert
              onClick={() => {
                history.push("/identity");
              }}
              message="Account Identity Verification has been Declined"
              type="error"
              showIcon={true}
              icon={<img src={AlertFill} alt="SVG Image" />}
              description={
                <div dangerouslySetInnerHTML={{ __html: htmlContent }} />
              }
            />

            <div className="menu-card">
              <Card className="card-item">
                <div className="card-text">
                  My Booking
                  <br />
                  Records
                </div>
                <div className="myrecord-img" />
              </Card>
              <Card className="card-item">
                <div className="card-text">
                  My Registered <br />
                  License Plate
                  <br />
                  Number
                </div>
                <div className="lpn-img" />
              </Card>
            </div>
          </div>
        </div>
      </div>
    </PaddingContent>
  );
};

export default Declined;
